<template>
  <div class="w-full h-[100vh] relative">
    <div
      class="text-[2rem] text-[var(--theme-font-color)] font-semibold pt-[28px] s2k:pt-[37.3px] s4k:pt-[56px]"
    >
      <div class="flex flex-row justify-between items-center pb-[14px] sk:pb-[18px] s4k:pb-[28px]"  style="border-bottom: solid var(--grid) 1px">
        <span class="pl-[70px] s2k:pl-[93px] s4k:pl-[140px]">Video Analysis</span>
      </div>
      <div
        class="flex flex-row justify-start items-center mt-[20px] pl-[70px] s4k:mt-[40px] s4k:pl-[140px] s2k:mt-[26.6px] s2k:pl-[93px]"
      >
        <div
          class="w-[35vw] flex flex-row justify-between items-center h-[37px] s4k:h-[74px] s2k:h-[49.3px]"
        >
          <button @click="showCategories = !showCategories"
            class="flex flex-row justify-center items-center w-[170px] h-[38px] bg-[var(--theme-button-bg)] text-[var(--theme-font-color)] border-solid rounded-l-[8px] border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem] s4k:w-[340px] s4k:h-[76px] s2k:w-[226px] s2k:h-[50.6px] s2k:rounded-l-[10.6px] s4k:rounded-l-[16px] relative"
          >
            All categories
            <svg-icon
              name="controls-down"
              width="12px"
              height="12px"
              class="svgEdit s2ksvg s4ksvg ml-[6px] s2k:ml-[8px] s4k:ml-[12px]"
            ></svg-icon>
            <div class="absolute top-[110%] z-[10] w-[125px] s4k:w-[250px] s2k:w-[170px]" v-if="showCategories">
              <ul class="" style="list-style-type: none">
                <li class="w-full h-[30px] s2k:h-[40px] s4k:h-[60px] bg-[var(--theme-button-bg)] border-b border-solid border-[var(--grid)] flex flex-col justify-center items-center hover:bg-[var(--theme-hover)]">categories 1</li>
                <li class="w-full h-[30px] s2k:h-[40px] s4k:h-[60px] bg-[var(--theme-button-bg)] border-b border-solid border-[var(--grid)] flex flex-col justify-center items-center hover:bg-[var(--theme-hover)]">categories 2</li>
                <li class="w-full h-[30px] s2k:h-[40px] s4k:h-[60px] bg-[var(--theme-button-bg)] border-b border-solid border-[var(--grid)] flex flex-col justify-center items-center hover:bg-[var(--theme-hover)]">categories 3</li>
              </ul>
            </div>
          </button>
          <fwb-input
            v-model="searchCamera"
            placeholder=""
            id="searchCamera"
            style="width: 100%"
          >
            <!-- <template #prefix>
              <svg aria-hidden="true"
                class="w-5 h-5 text-gray-500 dark:text-gray-400 s4k:w-8 s4k:h-8 s2k:h-[26.6px] s2k:w-[25.5px]"
                fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2" />
              </svg>
            </template> -->
          </fwb-input>
          <button
            class="w-[46px] h-[38px] bg-[var(--theme-button-bg)] text-white border-solid rounded-r-[8px] border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem] s4k:w-[92px] s4k:h-[76px] s2k:w-[61px] s2k:h-[50.6px] s2k:rounded-r-[8px]"
          >
            <svg
              aria-hidden="true"
              class="svgClass w-5 h-5 dark:text-gray-400 s4k:w-8 s4k:h-8 s2k:h-[26.6px] s2k:w-[25.5px]"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              />
            </svg>
          </button>
        </div>
      </div>
      <div 
        id="shopList"
        class="px-[70px] mt-[20px] s4k:px-[140px] s2k:mt-[26.6px] s2k:px-[93px] s4k:mt-[40px] flex flex-row justify-start "
      >
        <div
          class="p-[16px_12px] s2k:p-[21.3px_15px] s4k:p-[32px_24px] w-[256px] h-[380px] rounded-[8px] border-[var(--grid)] border border-solid bg-[var(--layout-progress-bg)] s2k:w-[341px] s2k:h-[506px] s2k:rounded-[10.6px] s4k:w-[512px] s4k:h-[760px] s4k:rounded-[16px]"
        >
          <div class="flex flex-row justify-between items-center">
            <div class="text-[1.3rem]">Types</div>
            <svg-icon
              name="controls-up"
              width="12px"
              height="12px"
              class="svgEdit s2ksvg s4ksvg"
            ></svg-icon>
          </div>
          <fwb-input
            v-model="searchType"
            placeholder=""
            id="searchType"
          ></fwb-input>
          <div class="w-full flex flex-col justify-start">
            <div
              class="flex flex-row justify-start items-center mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
              v-for="v in checkList"
              :key="v.id"
            >
              <fwb-checkbox v-model="v.checked" id="checkAll" />
              <span
                class="text-[1.13rem] text-[var(--theme-font-color)] font-[400] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]"
                >{{ v.name }}</span
              >
            </div>
          </div>
        </div>
        <div
          class="h-[calc(100vh_-_136px_-_20px)] s2k:h-[calc(100vh_-_181px_-25px)] s4k:h-[calc(100vh_-_272px_-_20px)] w-[1264px] ml-[16px] s2k:w-[1686px] s2k:ml-[21.3px] s4k:w-[2528px]  s4k:ml-[32px] storeList"
        >
          <div class="w-[1008px] s2k:w-[1344px] s4k:w-[2016px] h-[167px] p-[24px] border-[var(--grid)] border border-solid rounded-[8px] s2k:h-[222px] s2k:p-[32px] s2k:rounded-[10.6px] s4k:h-[334px] s4k:p-[48px] s4k:rounded-[16px] mb-[20px] s2k:mb-[26px] s4k:mb-[40px]" v-for="v in 5" :key="v">
            <div class="flex flex-row justify-start relative" >
              <div @click="buySuccess"
                class="cursor-pointer flex absolute right-[24px] w-[118px] h-[40px] rounded-[8px] text-white text-[1.13rem] bg-[#1A56DB] font-[400] s2k:right-[64px] s2k:w-[157px] s2k:h-[53px] s2k:rounded-[10.6px] s4k:right-[48px] s4k:w-[236px] s4k:h-[80px] s4k:rounded-[16px]"
              >
                <span class="m-auto">Purchase</span>
              </div>
              <img
                src="https://s3-alpha-sig.figma.com/img/429a/4c0c/e2a8fcbadd3f81f3f5ff65b30437efaf?Expires=1718582400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=I5iwM64Jx1c1JBTAJ6jbN9wNvGMc2rTpjVlPYeA~atplMLIlXjnsGP0l7W44qO13eXYWBIO5yN3etBmpVH1XYYQ2Z7-mAqWT-v50wvUCqxpF7vwcPXI~OAgMVWi79LyCr-s5iykQYowzWmN~f60IethNNo8bQfIyBEoaXvdAzMtaxKsyTGwu4hxyyiW8LomJciVyjz7vP78Vmd9lfriWrWf0F5955FvTNoz5SGb3PHUbx8lUcjGWFQuFuEDIghOcN5JYR1RwkiSPvoI99uVjWjp9~gyB59NsGUsrgdv7EeuyaiEEQtUhMk3n7HkIQmdeemwGhoxvHaO8eosMXCzsSA__"
                alt=""
                class="w-[240px] h-[160px] rounded-[12px] s2k:w-[320px] s2k:h-[213px] s2k:rounded-[16px] s4k:w-[480px] s4k:h-[320px] s4k:rounded-[24px]"
              />
              <!-- <img
                v-lazy="imgUrl + 1"
                alt=""
                class="w-[240px] h-[160px] rounded-[12px] s2k:w-[320px] s2k:h-[213px] s2k:rounded-[16px] s4k:w-[480px] s4k:h-[320px] s4k:rounded-[24px]"
              /> -->
              <div class="flex flex-col justify-center ml-[32px] s2k:ml-[42px] s4k:ml-[64px]">
                <div class="text-[1.6rem] text-[var(--theme-font-color)]">
                  Crowd Analysis
                  <p
                    class="text-[1.13rem] text-[var(--theme-font-desc-color)] font-[400]"
                  >
                    Publisher name
                  </p>
                </div>
                <div class="mt-[4%] w-[421px] s2k:w-[561px] s4k:w-[842px]">
                  <div
                    class="text-[1.13rem] font-[400] text-[var(--theme-font-desc-color)] leading-[1.8rem]"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua.
                  </div>
                  <div class="flex flex-row justify-start items-center">
                    <div class="text-[2rem] text-[var(--theme-font-desc-color)] flex flex-row justify-start items-center">
                      <span class="line-through">$499</span>
                      <span class="text-[var(--theme-font-color)] text-[1.13rem] ml-[15px] s2k:ml-[15px] s4k:ml-[30px] font-[400] w-auto p-[2px_5px] bg-[var(--theme-button-bg)] s2k:p-[2.6px_6.6px] s4k:p-[4px_10px] rounded-[4px] s2k:rounded-[5.3px] s4k:rounded-[8px]">Limited time free</span>
                    </div>
                    <div
                      class="text-[1rem] text-[var(--grid)] font-[400] bg-[var(--layout-nav-bg-hover)] ml-[10px] s2k:ml-[13px] s4k:ml-[20px]"
                    >
                      <!-- <span class="p-[10px_2px] s2k:p-[13px_2.6px] s4k:p-[20px_4px]">Up to 45% off</span> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="w-[256px] h-[300px] border-[var(--grid)] border border-solid"></div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import { FwbInput, FwbCheckbox } from "flowbite-vue";
import { message } from "ant-design-vue";

const searchCamera = ref("");
const searchType = ref("");
const checkAll = ref();
const checkList = ref([
  { id: 1, name: "Sound", checked: false },
  { id: 2, name: "Motion", checked: true },
  { id: 3, name: "Facial Recognition", checked: false },
  { id: 4, name: "Object Recognition", checked: true },
  { id: 5, name: "Crowd Analysis", checked: false },
  { id: 6, name: "AI", checked: true },
  { id: 7, name: "Security", checked: false },
  { id: 8, name: "Criminal Investigations", checked: false },
  { id: 9, name: "Business Analytics", checked: false },
  { id: 10, name: "Urban Planning", checked: true },
]);
const showCategories = ref(false);
const imgUrl = ref("https://picsum.photos/240/160?");
onMounted(() => {
  let element = document.getElementById("shopList");
  let distanceToTop = element.offsetTop;
  console.log("距离顶部的距离为：" + distanceToTop + " 像素");
});
const buySuccess = () => {
  message.success("Successful purchase");
}
</script>

<style scoped lang="scss">
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

#searchType {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-radius: 8px;
    margin-top: 12px;
    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

#checkAll {
  :deep(input) {
    border: solid var(--grid) 1px;
    background-color: var(--theme);
    width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 1.25rem;

    &:checked {
      background-color: #1a56db;
      border-color: #1a56db;
    }
  }
}
.storeList {
overflow-y: scroll;
margin-right: 10px;
}

.storeList::-webkit-scrollbar {
width: 4px;
}

.storeList::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 10px;
}

.storeList::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
border-radius: 10px;
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }

  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }
  #searchType {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }

  #checkAll {
    :deep(input) {
      width: 21.3px;
      height: 21.3px;
    }
  }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }

  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
    }
  }
  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
      border-radius: 16px;
    }
  }

  #checkAll {
    :deep(input) {
      width: 30px;
      height: 30px;
    }
  }
}
</style>

<style lang="scss">
@media screen and (min-width: 2560px) {
  .ant-message-notice-content {
    transform: scale(1.3) !important;
    margin-top: 30px !important;
  }
}
@media screen and (min-width: 3840px) {
  .ant-message-notice-content {
    transform: scale(2) !important;
    margin-top: 50px !important;
  }
}
</style>